<template>
  <br />
  <span class="feedback">投诉举报</span>
  <div class="feedback-page">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">本月收到投诉举报</div>
          <div class="stat-value">32</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">累计收到投诉举报</div>
          <div class="stat-value">489</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-title">投诉举报处理率</div>
          <div class="stat-value">87.4%</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索和表格区域 -->
    <el-card class="main-card" shadow="hover">
      <div style="display: flex; align-items: center; margin-bottom: 16px">
        <el-form :inline="true">
          <el-form-item label="提交时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 260px"
            />
          </el-form-item>
        </el-form>
        <div style="margin-left: auto; display: flex; align-items: center">
          <el-input
            v-model="searchText"
            placeholder="输入编号或提交人信息进行搜索"
            style="width: 260px"
            clearable
          />
          <el-button type="primary" style="margin-left: 8px">搜索</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="filteredList"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#f8f8f9',
          color: '#333',
          fontWeight: 'bold',
        }"
      >
        <el-table-column prop="no" label="编号" width="90" align="center" />
        <el-table-column
          prop="content"
          label="举报对象"
          min-width="220"
          show-overflow-tooltip
        />
        <el-table-column
          prop="reporter"
          label="举报内容"
          width="100"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="举报人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="120"
          align="center"
        />
        <el-table-column prop="status" label="状态" width="110" align="center">
          <template #default="scope">
            <span
              v-if="scope.row.status === '待处理'"
              style="color: #faad14; font-weight: bold"
              ><i
                style="font-size: 14px; vertical-align: middle; color: #faad14"
                >●</i
              >
              待回复</span
            >
            <span
              v-else-if="scope.row.status === '已回复'"
              style="color: #52c41a; font-weight: bold"
              ><el-icon><CircleCheckFilled /></el-icon> 已回复</span
            >
            <span v-else style="color: #f56c6c; font-weight: bold"
              ><el-icon><CircleCloseFilled /></el-icon> 回复失败</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="提交时间"
          width="160"
          align="center"
        />
        <el-table-column
          prop="source"
          label="数据来源"
          width="120"
          align="center"
        />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="onView(scope.row)"
              >查看</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              style="margin-left: 8px"
              @click="onReply(scope.row)"
              v-if="scope.row.status === '待回复'"
              >回复</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>

    <!-- 回复弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="意见反馈回复"
      width="520px"
      align-center
      :close-on-click-modal="false"
      @close="onCancel"
    >
      <div style="margin-bottom: 12px">
        <div><strong>编号：</strong>{{ currentRow?.no }}</div>
        <div style="margin: 6px 0">
          <strong>意见反馈：</strong>{{ currentRow?.content }}
        </div>
        <div><strong>提交人：</strong>{{ currentRow?.reporter }}</div>
        <div><strong>手机号：</strong>{{ currentRow?.phone }}</div>
        <div><strong>提交时间：</strong>{{ currentRow?.date }}</div>
        <div><strong>数据来源：</strong>{{ currentRow?.source }}</div>
      </div>
      <el-form :model="replyForm" ref="replyFormRef">
        <el-form-item
          label="回复"
          prop="content"
          :rules="[
            { required: true, message: '请输入回复内容', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="replyForm.content"
            type="textarea"
            :rows="3"
            maxlength="500"
            show-word-limit
            placeholder="请输入回复内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 详情抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="意见反馈详情"
      size="480px"
      :with-header="true"
    >
      <div style="margin-bottom: 8px">
        <strong>编号：</strong>{{ currentRow?.no }}
      </div>
      <div style="margin-bottom: 8px">
        <strong>意见反馈：</strong>{{ currentRow?.content }}
      </div>
      <div style="margin-bottom: 8px">
        <strong>提交人：</strong>{{ currentRow?.reporter }}
      </div>
      <div style="margin-bottom: 8px">
        <strong>手机号：</strong>{{ currentRow?.phone }}
      </div>
      <div style="margin-bottom: 8px">
        <strong>数据来源：</strong>{{ currentRow?.source }}
      </div>
      <div style="margin-bottom: 8px">
        <strong>状态：</strong>
        <span
          v-if="currentRow?.status === '待回复'"
          style="color: #faad14; font-weight: bold"
          ><i style="font-size: 14px; vertical-align: middle; color: #faad14"
            >●</i
          >
          待回复</span
        >
        <span
          v-else-if="currentRow?.status === '已回复'"
          style="color: #52c41a; font-weight: bold"
          ><el-icon><CircleCheckFilled /></el-icon> 已回复</span
        >
        <span v-else style="color: #f56c6c; font-weight: bold"
          ><el-icon><CircleCloseFilled /></el-icon> 回复失败</span
        >
      </div>
      <div style="margin-bottom: 8px">
        <strong>提交时间：</strong>{{ currentRow?.date }}
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";

// 静态数据
interface FeedbackRow {
  no: string;
  content: string;
  reporter: string;
  phone: string;
  status: "待回复" | "已回复" | "回复失败";
  date: string;
  source: string;
}

const feedbackList = ref<FeedbackRow[]>([
  {
    no: "100001",
    content:
      "活动无法进行报名，这几天一直无法报名，是不是你们系统有问题，请及时处理一下，非常感谢。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100002",
    content: "页面加载很慢，体验不好。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100003",
    content: "功能建议：希望增加夜间模式。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100004",
    content: "数据统计有误。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100005",
    content:
      "活动无法进行报名，这几天一直无法报名，是不是你们系统有问题，请及时处理一下，非常感谢。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100006",
    content: "页面加载很慢，体验不好。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100007",
    content: "功能建议：希望增加夜间模式。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100008",
    content: "数据统计有误。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100009",
    content:
      "活动无法进行报名，这几天一直无法报名，是不是你们系统有问题，请及时处理一下，非常感谢。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
  {
    no: "100010",
    content: "页面加载很慢，体验不好。",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待回复",
    date: "2025/05/15 23:59",
    source: "六度特惠",
  },
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = computed(() => feedbackList.value.length);
const dateRange = ref<any[]>([]);
const searchText = ref("");

const filteredList = computed(() => {
  let list = feedbackList.value;
  if (searchText.value) {
    list = list.filter(
      (item) =>
        item.no.includes(searchText.value) ||
        item.reporter.includes(searchText.value) ||
        item.phone.includes(searchText.value)
    );
  }
  // 分页
  const start = (currentPage.value - 1) * pageSize.value;
  return list.slice(start, start + pageSize.value);
});

// 弹窗/抽屉相关
const dialogVisible = ref(false);
const drawerVisible = ref(false);
const currentRow = ref<FeedbackRow | null>(null);

// 回复表单
const replyForm = reactive({ content: "" });
const replyFormRef = ref<FormInstance>();

function onReply(row: FeedbackRow) {
  currentRow.value = row;
  dialogVisible.value = true;
  replyForm.content = "";
}

function onCancel() {
  dialogVisible.value = false;
  replyForm.content = "";
}

function mockReplyApi() {
  return new Promise<{ success: boolean }>((resolve) => {
    setTimeout(() => {
      resolve({ success: Math.random() > 0.5 });
    }, 800);
  });
}

async function onConfirm() {
  if (!replyForm.content) {
    ElMessage.warning("请输入回复内容");
    return;
  }
  const res = await mockReplyApi();
  if (res.success) {
    ElMessage.success("意见反馈已回复");
    if (currentRow.value) currentRow.value.status = "已回复";
    dialogVisible.value = false;
    replyForm.content = "";
  } else {
    ElMessage.error("意见反馈回复失败，请稍后尝试");
    if (currentRow.value) currentRow.value.status = "回复失败";
  }
}

function onView(row: FeedbackRow) {
  currentRow.value = row;
  drawerVisible.value = true;
}
</script>

<style scoped>
.feedback-page {
  padding: 18px 24px;
}
.stat-row {
  margin-bottom: 18px;
}
.stat-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 18px 24px;
  text-align: center;
}
.stat-title {
  font-size: 15px;
  color: #888;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #2066ff;
}
.main-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 18px 24px;
}

.feedback {
  position: relative;
  left: 25px; /* 负值向左移动，正值向右 */
  font-size: 20px;
  font-weight: bold;
  color: #333; /* 字体颜色 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文字阴影 */
  transition: all 0.3s ease; /* 添加过渡动画 */
}
</style>
